<!doctype html>
<html>
	<head>
		<title>文件上传管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="./js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="./js/spark-md5.min.js"></script>
		<script type="text/javascript" src="./js/upload_index.js"></script>
		<script type="text/javascript">
		
		</script>
		<style type="text/css">
		 *{margin:0 auto}
		 body{
			background:#212121;
		 }
		 #progress{
		 	width:100%;
		 	height:2px;
		 	position: absolute;
		 	top:0;
		 	left:0;
            background: -webkit-linear-gradient(left, #13F300,#A70CD8, #F5FF08);
			background: -moz-linear-gradient(left, #13F300,#A70CD8, #F5FF08);
			background: -ms-linear-gradient(left, #13F300,#A70CD8, #F5FF08);
			background: -o-linear-gradient(left, #13F300,#A70CD8, #F5FF08);
			background: linear-gradient(left, #13F300,#A70CD8, #F5FF08);
		 }
			#upload_bg{
				margin-top:2px;
				width:100%;
				height:500px;
				background:#1A1A1A;
				box-sizing:border-box;
				border:solid 1px #2E2E2E;
				box-shadow:1px 1px 5px #0F0F0F;
				
			}
			#form{
				width:283px;
				height:33px;
				margin-top:15%;
			}
			#upload_bg #url{
				display:block;
				outline: none;
				width:200px;
				height:30px;
				float:left;
				text-align:center;
				line-height:30px;
				color:rgba(255,255,255,.2);
				background:#3B3B3B;
				box-shadow:0 0 5px #0F0F0F inset;
				border:solid 1px rgba(255,255,255,.3);
				overflow:hidden;
				transition: all 0.5s ease;
				-webkit-transition: all 0.5s ease;/* Safari and Chrome or liebao*/
				-moz-transition: all 0.5s ease;/*Firefox */
				-o-transition: all 0.5s ease;/*Opera */
				-ms-transition: all 0.5s ease;/*for ie*/
			}
			#upload_bg #url:hover{
				border:solid 1px rgba(31,155,5,0.8);
				box-shadow:0px 0px 3px #369008;
			}
			#upload_bg #up{
				outline: none;
				width:80px;
				height:32px;
				background:#0F5AC9;
				float:left;
				margin-left:0px;
				text-align:center;
				line-height:30px;
				box-shadow:1px 1px 2px #0303B4;
				border:solid 1px rgba(255,255,255,0.3);
				border-left:none;
				color:white;
				cursor: pointer;
			}
			#upload_bg #upb:hover{
			background:#0A4DB2;
			}
			#files_box_bg{
				width:100%;
				height:auto;
				overflow: hidden;
				box-sizing:border-box;
				padding: 5px;
			}
			#files_box_bg .files_box_tou,
			#files_box_bg .files_box_foot{
				box-sizing:border-box;
				width: 100%;
				height:35px;
				background: #1A1A1A;
				border:solid 1px #434343;
				background: -webkit-linear-gradient(#1A1A1A,#030303);
				background: -moz-linear-gradient(#1A1A1A,#030303);
				background: -ms-linear-gradient(#1A1A1A,#030303);
				background: -o-linear-gradient(#1A1A1A,#030303);
				background: linear-gradient(#1A1A1A,#030303);
			}
			#files_box_bg .files_box_tou .check_detail_bg{
				width: 100%;
				height: 100%;
			}
			#files_box_bg .files_box_tou .check_detail_bg .check_detail,
			#files_box_bg .files_box_foot .check_detail_bg .check_detail{
				width: 10%;
				height: 100%;
				color: #626262;
				float: right;
				font-size: 14px;
				line-height: 30px;
				white-space: nowrap;/*文本不换行*/
				text-overflow: ellipsis;
				overflow: hidden;/*以上三行实现溢出显示省略号*/
			}
			#files_box_bg .files_box_tou .check_detail_bg .checkAll_b,
			#files_box_bg .files_box_foot .check_detail_bg .checkAll_b{
				width: 80px;
				height: 100%;
				color: #626262;
				float: right;
				font-size: 13px;
				line-height: 30px;
				margin-right: 5px;
				
			}
			#files_box_bg .files_box_tou .check_detail_bg #uploadAll_b1,
			#files_box_bg .files_box_foot .check_detail_bg #uploadAll_b2{
				width: 60px;
				height: 25px;
				float: right;
				font-size: 12px;
				line-height: 25px;
				text-align:center;
				border-radius: 13px;
				border:solid 1px #272727;
				box-shadow: 1px 1px 3px #0D0D0D;
				text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
				color: #626262;
				margin-top: 2px;
				margin-right: 5px;
				cursor: pointer;
				background: -webkit-linear-gradient(#070707,#111111,#030303);
				background: -moz-linear-gradient(#070707,#111111,#030303);
				background: -ms-linear-gradient(#070707,#111111,#030303);
				background: -o-linear-gradient(#070707,#111111,#030303);
				background: linear-gradient(#070707,#111111,#030303);
			}
			#files_box_bg .files_box_tou .check_detail_bg #uploadAll_b1:hover,
			#files_box_bg .files_box_foot .check_detail_bg #uploadAll_b2:hover{
				background: -webkit-linear-gradient(#04D650,#008A10,#027018);
				background: -moz-linear-gradient(#04D650,#008A10,#027018);
				background: -ms-linear-gradient(#04D650,#008A10,#027018);
				background: -o-linear-gradient(#04D650,#008A10,#027018);
				background: linear-gradient(#04D650,#008A10,#027018);
				border:solid 1px rgba(3,157,49,0.6);
				box-shadow: 1px 1px 3px rgba(5,173,33,0.8);
				color: #EAD303;
				text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
			}
			#files_box_bg #files_box{
				width:100%;
				height:auto;
				overflow: visible;
				
			}
			#files_box_bg #files_box .file{
				width:100%;
				height:30px;
				background: #212326;
				border-left:solid 1px #434343;
				border-right:solid 1px #434343;
				border-bottom: dashed 1px #363636;
				box-sizing:border-box;
				transition: all 0.5s ease;
				-webkit-transition: all 0.5s ease;
				-moz-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
				-ms-transition: all 0.5s ease;
			}
			#files_box_bg #files_box .file div{
				float: left;
				width: 160px;
				height:100%;
				line-height: 30px;
				border-right:solid 1px #313131;
				color:#484B4D;
				white-space: nowrap;/*文本不换行*/
				text-overflow: ellipsis;
				overflow: hidden;/*以上三行实现溢出显示省略号*/
				
			}
			#files_box_bg #files_box .file:nth-child(odd){
				background: #242727;
			}
			#files_box_bg #files_box .file:hover{
				background: #1C1C1C;

			}
			#files_box_bg #files_box .file .file_li{
				width:5%;
				max-width: 60px;
				text-align: center;
				font-size: 1em;
			}
			#files_box_bg #files_box .file .file_name{
				/*min-width: 150px;
				max-width: 250px;
				width: auto;*/
				width:25%;
				font-size: 100%;
				text-align: left;
				text-indent: 5px;
				color:#676767;
				
			}
			#files_box_bg #files_box .file .file_size,
			#files_box_bg #files_box .file .file_type{
				width: 10%;
				color:#676767;
				text-align: center;
				font-size:0.5em;
			}
			#files_box_bg #files_box .file .file_md5{
				height: 100%;
				width: 24%;
				color:#676767;
				text-align: center;
				font-size:0.7em;
				position: relative;
			}
			#files_box_bg #files_box .file .file_md5 .md5_b{
				width: 80px;
				height: 20px;
				font-size: 12px;
				line-height: 20px;
				text-align:center;
				border-radius: 10px;
				border: solid 1px #9C9C9C;
				box-shadow: 1px 1px 3px #5E5E5E;
				text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
				color: #292929;
				cursor: pointer;
				 /*非IE的主流浏览器识别的垂直居中的方法*/
		     	vertical-align:middle;
				/*设置水平居中*/
		     	text-align:center;
		     	position: absolute;
		     	left: 0;
		     	right: 0;
		     	top:3px;
				background: -webkit-linear-gradient(#C9C9C9,#B4B4B4,#919191);
				background: -moz-linear-gradient(#C9C9C9,#B4B4B4,#919191);
				background: -ms-linear-gradient(#C9C9C9,#B4B4B4,#919191);
				background: -o-linear-gradient(#C9C9C9,#B4B4B4,#919191);
				background: linear-gradient(#C9C9C9,#B4B4B4,#919191);
				
			}
			#files_box_bg #files_box .file .file_md5 .md5_b:hover{
				color:#08437C;
			}
			#files_box_bg #files_box .file .file_upprogress{
				text-align: center;
				width: 15%;
			}
			#files_box_bg #files_box .file .file_upprogress progress{
				width: 80%;
			}
			#files_box_bg #files_box .file .file_check{
				width: 4%;
				text-align: center;
			}
			#files_box_bg #files_box .file .file_up{
				width:6%;
				text-align: center;


			}
			#files_box_bg #files_box .file .file_up input{
				width: 60%;
				outline: none;
				height: 23px;
				border:solid 1px #028321;;
				border-radius: 5px;
				background: -webkit-linear-gradient(#00D622,#00470E);
				background: -moz-linear-gradient(#00D622,#00470E);
				background: -ms-linear-gradient(#00D622,#00470E);
				background: -o-linear-gradient(#00D622,#00470E);
				background: linear-gradient(#00D622,#00470E);
				cursor:pointer;
				color: #DEDEDE;

			}

		</style>
	</head>
	<body>
		<div id="progress"></div>
		<!--<p style="display:block;width:1px;height:100%;position: absolute;left:0;border-left:dashed 1px #fff;box-sizing:border-box;"></p>
		<p style="display:block;width:1px;height:100%;position: absolute;right:0;border-left:dashed 1px #fff;box-sizing:border-box;"></p>-->
		<div id="upload_bg">
			<div id="form">
				<form action="upload.php" method="post" target="_blank" enctype="multipart/form-data">
					<input type="hidden" name="MAX_FILE_SIZE" value="209715200" />
					<input type="file" name="wen[]" multiple="true" id="url" />
					<input type="submit" name="sub" value="上传" id="up"/>
				</form>
			</div>
		</div>
		<div id="files_box_bg">
			<div class="files_box_tou">
				<div class="check_detail_bg">
					<div id="uploadAll_b1">上传全部</div>
					<div class="checkAll_b">
						<input type="checkbox" id="checkALl1" class="checkAll">&nbsp;<label for="checkALl1">全选</label>
					</div>
					<div class="check_detail">选择了0个</div>
				</div>
			</div>
			<div id="files_box">
				<div class="file">
					<div class="file_li">1.</div>
					<div class="file_name"><span class="title">名字:</span>文件列表样例.html</div>
					<div class="file_size"><span class="title">大小:</span>1000.00MB</div>
					<div class="file_type"><span class="title">类型:</span>text/html</div>
					<div class="file_md5"><span class="title"></span><div class="md5_b">获取md5</div></div>
					<div class="file_upprogress"><progress min="0" max="100" value="100" ></progress><span>100%</span></div>
					<div class="file_check"><input type="checkbox" ></div>
					<div class="file_up"><input type="button" value="上传"></div>
				</div>
				<div class="file">
					<div class="file_li">1.</div>
					<div class="file_name"><span class="title">名字:</span>文件列表样例.js</div>
					<div class="file_size"><span class="title">大小:</span>1000.00MB</div>
					<div class="file_type"><span class="title">类型:</span>text/js</div>
					<div class="file_md5"><span class="title"></span><div class="md5_b">获取md5</div></div>
					<div class="file_upprogress"><progress min="0" max="100" value="100" ></progress><span>100%</span></div>
					<div class="file_check"><input type="checkbox" ></div>
					<div class="file_up"><input type="button" value="上传"></div>
				</div>
			</div>
			<div class="files_box_foot">
				
					<div class="check_detail_bg">
						<div id="uploadAll_b2">上传全部</div>
						<div class="checkAll_b">
							<input type="checkbox" id="checkALl2" class="checkAll">&nbsp;<label for="checkALl2">全选</label>
						</div>
						<div class="check_detail">选择了0个</div>
					</div>
			</div>
		</div>
		<div id="footer" style="margin-top:15px;">
			
			<p style="text-align:center;color:#0A0A0A;line-height:30px;text-shadow:1px 1px 0px rgba(255,255,255,0.1)">copyrigth&copy;by BlueMoon</p>
			<p style="text-align:center;color:#0A0A0A;line-height:30px;text-shadow:1px 1px 0px rgba(255,255,255,0.1)">author:<a href="#" style="text-decoration:none;color:#313131;text-shadow:none;">蓝月萧枫</a></p>

		</div>
	</body>
</html>